<template>
  <div id="app" class="skLifeStuSleepInfo">
    <a-card :bordered="true">
        <div class="left-circle-icon">
          <span style="font-size: 20px;">个人睡眠质量</span>
          <a-icon type="left-circle"  @click="closeTable" style="font-size: 22px;"/>
        </div>
        <!-- <line-chart :width="'100%'" :height="'500px'" :xData="xData"  :data="lineData" v-bind="$attrs" :color="['#1890FF','#1890FF']" :axisLabelShow="true" :seriesName="'睡眠状态'"></line-chart> -->
        <sk-life-table-header @dataFrom="getDataFrom" :stuName="stuName" :dateType="'week'" ref="skLifeTableHeader" ></sk-life-table-header>
        <a-table :columns="columns" :pagination="false" rowKey="id" :dataSource="dataSource" style="margin:25px 0;" :scroll="{x:columns.length >= 12?3000:0,y:800}">
          <span slot="time" slot-scope="text, record">
            个人睡眠时长(分钟)
          </span>
        </a-table>
        <div>
          <p>{{ stuName }} 睡眠时长(分钟) / {{ columnsTitle }}</p>
        </div>
        <!-- <bar
          :barName="barName"
          :barData="barData"
          :color="['#1890FF', '#1890FF']"
          :barWidth="20"
          :seriesName="'睡眠时长'"
          :symbolSize="15"
          :width="'100%'"
          :height="'380px'"
        ></bar> -->
        <stu-sleep-bar :width="'100%'" :data="barData" :name="barName" :height="'420px'" :unit="['分钟','分钟','分钟']"></stu-sleep-bar>
    </a-card>
  </div>
</template>
<script>
import { queryStudengSleep } from '@/api/health.js'
import skLifeTableHeader from "@/components/skComponent/TableHeader.vue";
import LineChart from "@/components/Echarts/line";
// import Bar from "@/components/Echarts/Bar.vue";
import stuSleepBar from "@/components/Echarts/stuSleepBar.vue";
import { drinkAndToilet } from "@/api/health.js";
export default {
  name: 'skLifeStuSleepInfo',
  data() {
    return {
      columns:[],    //表格表头
      xData:[],    //折线图x坐标
      lineData:[],   //折线图y坐标
      dataSource:[],  //表格数据
      classId:"",           //班级id
      barName:[],        //柱状图x坐标
      barData:[],           //柱状图Y坐标
      stuName:"",         //学生姓名
      dateType:"",        //查询日期类型
      columnsTitle:""
    }
  },
  props:["detailName"],
  components: {
    skLifeTableHeader,
    LineChart,
    // Bar,
    stuSleepBar
  },

  filters: {},

  computed: {
    skStudentId(){
      return this.$store.state.skCommon.skStudentId
    }
  },

  created() {
    
  },

  activated() {},

  mounted() {
    this.getLineData();
    
  },

  methods: {
    // 关闭表格页面
    closeTable(){
      let data = {
        show:true,
        stuSleepInfoShow:true
      }
      this.$emit("lifeData",data);
    },
    // 获取参数
    getDataFrom(dataForm){
      this.classId = dataForm.classId;
      this.dateType = dataForm.dateType;
        let params = {
          dateType: dataForm.dateType=="historySem"?"sem":dataForm.dateType,
          queryDate: this.$skCommon.getDate(0),
          semesterId:dataForm.semesterId == "历史学期" ?dataForm.semesterId2:dataForm.semesterId,
          studentId:this.skStudentId
        }
        console.log(this.dateType);
        let url = "/health/sleep/selectStudentInfo";
        this.barName = [];
        this.barData = [];
        drinkAndToilet(url,params).then((res)=>{
          if(res.success){
            this.stuName = res.result[0].name;
            this.dataSource = res.result;
            let data1 = [],data2 = [],data3 = [];
            res.result[0].detail.map(item=>{
              this.barName.push(this.getWeekDate(item.date));
              data1.push(item.sleepCount)
              data2.push(item.sleepDeep)
              data3.push(item.sleepLight)
            //   this.barData.push(item.sleepCount);
            })
            this.barData.push(data1,data2,data3)
            this.setColumns();
          } else {
            this.$message.warning(res.message);
          }
        }).catch((error)=>{
          console.error(error);
        })
    },  
    getWeekDate(date){
      if (this.dateType == "week") {
        return date.substring(5,12) +" "+ this.$skCommon.getWeekDate(date)
      }else {
        return date.substring(5) 
      }
      
    },
    setColumns(){
      this.columns = []
      this.columnsTitle = '';
      switch (this.dateType) {
        case "month":
          this.columnsTitle = "月"
          break;
        case "sem":
        case "historySem":
          this.columnsTitle = "学期"
          break;
        default:
          this.columnsTitle = "周"
          break;
      }
      this.columns.push(
        {
          title: '',
          align: 'center',
          width: 120,
          dataIndex: 'time',
          scopedSlots: { customRender: 'time' },
        },
        {
          title: this.columnsTitle + '睡眠时长(分钟)',
          align: 'center',
          width: 100,
          dataIndex: 'sleepCount',
          
        },
        {
          title: '平均睡眠时长(分钟)',
          align: 'center',
          width: 100,
          dataIndex: 'average',
          customRender:function (text,index) {
            return text.toFixed(2)
          }
        },
      )
      this.dataSource[0].detail.map((item,i)=>{
        let json = {
          dateType:this.dateType,startDate:item.date,i
        }
        this.columns.push({
          title: this.$skCommon.tableHeaderDate(json),
          align: 'center',
          width: 100,
          dataIndex: `detail[${i}].sleepCount`
        })
      })
    },
    getLineData(){
      let params = {
        queryDate:this.$skCommon.getDate(0),
        // queryDate:"2023-03-08",
        studentId:this.skStudentId
      }
      queryStudengSleep(params).then((res)=>{
        if(res.success){
          res.result.map(item=>{
            this.xData.push(item.dateTime.substring(11,16));
            this.lineData.push(item.sleepCount);
          })
        } else {
          this.message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.left-circle-icon{
  width:100%;
  display: flex;
  justify-content: space-between;
  margin-bottom:30px;
  cursor: pointer;
}
</style>
